<template>
  <a-select v-on="$listeners" v-bind="$attrs">
    <a-select-option v-for="option in options" :key="option.value" :value="option.value">
      <img :src="option.src" />
    </a-select-option>
  </a-select>
</template>

<script>
import linePng from '../assets/lines'

const lineOptions = [
  { value: 0, src: linePng.line },
  { value: 2, src: linePng.dashed2 },
  { value: 4, src: linePng.dashed4 },
  { value: 6, src: linePng.dashed6 }
]

const dbLineOptions = [
  { value: 0, src: linePng.doubleLine },
  { value: 2, src: linePng.doubleDashed2 },
  { value: 4, src: linePng.doubleDashed4 },
  { value: 6, src: linePng.doubleDashed6 }
]

export default {
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      linePng
    }
  },
  computed: {
    options() {
      return this.type === 1 ? lineOptions : dbLineOptions
    }
  }
}
</script>

<style></style>
